<template>
  <div :style="manStyle" class="back">
    <div :height="manStyle.height">
      <div v-for="(item,index) in userList" :key="index">
        <div style="display: flex;font-weight: bold;padding-top: 60px;padding-left: 40px;padding-right: 40px;" v-if="propValue.isMuchMan == 0">
          <img :src="item.avatarUrl" :style="avatar" />
          <div style="margin-left: 5%;display: flex;flex-direction: column;position: relative;">
            <div style="width: 11em;" :style="nameColor">姓名 ：{{ item.nickName }}</div>
            <div style="width: 11em;margin-top: 20px;" :style="nameColor">电话 ：{{ item.phonenumber }}</div>
            <div style="width: 11em;margin-top: 20px;" :style="nameColor">部门 ：{{ item.deptName }}</div>

            <div style="display: flex;position: fixed;bottom: 5px;justify-content: space-between;width: 45%;">
              <div class="status" :style="statuSize" v-for="(ops,index) in dict.type.sys_status_type" v-if="ops.value == item.workStatus">{{ ops.label }}</div>
              <!-- <div class="status-not" :style="statuSize" v-for="(ops,index) in dict.type.sys_status_type" v-if="ops.value !== item.workStatus">{{ ops.label }}</div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUser } from "@/api/system/user";
import { color } from "echarts";
export default {
  name: '',
  dicts: ['sys_status_type'],
  props: {
    propValue: {
      type: Object,
      required: true,
      default: () => { },
    },
    element: {
      type: Object,
      default: () => { },
    }
  },
  data() {
    return {
      title: {
        display: "flex",
        alignItems: "center",
        padding: "10px",
        borderBottom: "1px solid #ccc",
        color: ""
      },
      userList: [],
      form: {},
      manStyle: {
        width: "0px",
        height: "0px",
        borderRadius: ""
      },
      nameColor: {
        color: "#000",
        fontSize: "10px"
      },
      remarkColor: {
        color: "#000",
        fontSize: "10px"
      },
      statuSize: {
        color: "",
        fontSize: "10px"
      },
      avatar: {
        width: "0px",
        height: "0px"
      }
    }
  },
  components: {
  },
  computed: {

  },
  watch: {
    'element.style.width': function () {
      const { width, height } = this.element.style
      this.manStyle.width = width + "px"
      this.manStyle.height = height + 'px'
    },
    'element.style.height': function () {
      const { width, height } = this.element.style
      this.manStyle.width = width + "px"
      this.manStyle.height = height + 'px'
    },
    'propValue.border': function () {
      this.manStyle.borderRadius = this.propValue.border + 'px'
    },
    'propValue.titleColor': function () {
      this.manStyle.color = this.propValue.titleColor
    },
    'propValue.user': function () {
      getUser(this.propValue.user).then(response => {
        this.form = response.data.user;
      });
    },
    'propValue.userList': function () {
      // con
      this.userList = []
      getUser(this.propValue.userList).then(response => {
          this.userList.push(response.data.user)
        });
    },
    'propValue.nameColor': function () {
      this.nameColor.color = this.propValue.nameColor
    },
    'propValue.remarkColor': function () {
      this.remarkColor.color = this.propValue.remarkColor
    },
    'propValue.nameSize': function () {
      this.nameColor.fontSize = this.propValue.nameSize + 'px'
    },
    'propValue.remarkSize': function () {
      this.remarkColor.fontSize = this.propValue.remarkSize + 'px'
    },
    'propValue.statuSize': function () {
      this.statuSize.fontSize = this.propValue.statuSize + 'px'
    },
    'propValue.statuColor': function () {
      this.statuSize.color = this.propValue.statuColor
    },
    'propValue.avatarWidth': function () {
      this.avatar.width = this.propValue.avatarWidth + 'px'
    },
    'propValue.avatarHeight': function () {
      this.avatar.height = this.propValue.avatarHeight + 'px'
    },
    'propValue.isMuchMan': function () {
      this.form = {}
      this.userList = []
      this.propValue.user = ""
      this.propValue.userList = []
      if (this.propValue.isMuchMan == 1) {
        this.avatar.height = 150 + 'px'
        this.avatar.width = 130 + 'px'
        this.propValue.avatarWidth = 130
        this.propValue.avatarHeight = 150
      }
    },
  },
  created() {
  },
  mounted() {
    const { width, height } = this.element.style
    this.avatar.width = this.propValue.avatarWidth + 'px'
    this.avatar.height = this.propValue.avatarHeight + 'px'
    this.manStyle.width = width + "px"
    this.manStyle.height = height + 'px'
    this.manStyle.borderRadius = this.propValue.border + 'px'
    this.manStyle.color = this.propValue.titleColor
    this.nameColor.color = this.propValue.nameColor
    this.statuSize.color = this.propValue.statuColor
    this.remarkColor.color = this.propValue.remarkColor
    this.nameColor.fontSize = this.propValue.nameSize + 'px'
    this.remarkColor.fontSize = this.propValue.remarkSize + 'px'
    this.statuSize.fontSize = this.propValue.statuSize + 'px'
    if (this.propValue.userList) {
        getUser(this.propValue.userList).then(response => {
          this.userList.push(response.data.user)
        });
    }
  },
  methods: {

  },
}
</script>

<style scoped>
.back{
  background-image: url('../../../../assets/images/tmk.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.status{
  width: 80px;
  height: 80px;
  background-image: url('../../../../assets/images/vdan.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* position: fixed; */
  /* bottom: 10px; */
  text-align: center;
  line-height: 80px;
  
}
.status-not{
  width: 65px;
  height: 65px;
  background-image: url('../../../../assets/images/ldan.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* position: fixed; */
  /* bottom: 10px; */
  text-align: center;
  line-height: 65px;
}
</style>
